From ebc09c5062cc7996b0f2aaf879062fc950c2e1c2 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Jan 2023 11:17:37 +0700
Subject: Transaction detail and variant card component

---
 src/pages/my/transactions/[id].js | 124 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 src/pages/my/transactions/[id].js

(limited to 'src/pages/my/transactions/[id].js')

diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js
new file mode 100644
index 00000000..79337a29
--- /dev/null
+++ b/src/pages/my/transactions/[id].js
@@ -0,0 +1,124 @@
+import AppBar from "@/components/layouts/AppBar";
+import Layout from "@/components/layouts/Layout";
+import LineDivider from "@/components/elements/LineDivider";
+import WithAuth from "@/components/auth/WithAuth";
+import { useEffect, useState } from "react";
+import apiOdoo from "@/core/utils/apiOdoo";
+import { useRouter } from "next/router";
+import { useAuth } from "@/core/utils/auth";
+import VariantCard from "@/components/variants/VariantCard";
+import currencyFormat from "@/core/utils/currencyFormat";
+import Disclosure from "@/components/elements/Disclosure";
+import DescriptionRow from "@/components/elements/DescriptionRow";
+import { CustomerSection } from "@/components/transactions/TransactionDetail";
+
+export default function DetailTransactions() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [ auth ] = useAuth();
+  const [ transaction, setTransaction ] = useState(null);
+  const [ activeSection, setActiveSection ] = useState({
+    purchase: false,
+    shipping: false,
+    invoice: false,
+  });
+
+  const toggleSection = ( name ) => {
+    setActiveSection({
+      ...activeSection,
+      [name]: !activeSection[name] 
+    });
+  };
+
+  useEffect(() => {
+    if (auth) {
+      const loadTransaction = async () => {
+        const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
+        setTransaction(dataTransaction);
+      }
+      loadTransaction();
+    }
+  }, [ auth, id ]);
+
+  return (
+    <WithAuth>
+      <Layout className="pb-4">
+        <AppBar title="Detail Transaksi" />
+          
+        <div className="p-4 flex flex-col gap-y-4">
+          <DescriptionRow label="Status Transaksi">
+            <span className="badge-green">Pending Quotation</span>
+          </DescriptionRow>
+          <DescriptionRow label="No Transaksi">
+            { transaction?.name }
+          </DescriptionRow>
+          <DescriptionRow label="Purchase Order">
+            { transaction?.po_name || '-' }
+          </DescriptionRow>
+          <DescriptionRow label="Ketentuan Pembayaran">
+            { transaction?.payment_term }
+          </DescriptionRow>
+          <DescriptionRow label="Nama Sales">
+            { transaction?.sales }
+          </DescriptionRow>
+          <DescriptionRow label="Waktu Transaksi">
+            { transaction?.date_order }
+          </DescriptionRow>
+        </div>
+
+        <LineDivider />
+
+        <Disclosure 
+          label="Detail Produk"
+        />
+
+        <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
+          { transaction?.products?.map((product, index) => (
+            <VariantCard
+              key={index}
+              data={product}
+            />
+          )) }
+          <div className="flex justify-between mt-3 font-medium">
+            <p>Total Belanja</p>
+            <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
+          </div>
+        </div>
+
+
+        <LineDivider />
+
+        <Disclosure 
+          label="Detail Pembeli" 
+          active={activeSection.purchase} 
+          onClick={() => toggleSection('purchase')} 
+        />
+        { activeSection.purchase && (
+          <CustomerSection address={transaction?.address?.customer} />
+        ) }
+
+        <LineDivider />
+
+        <Disclosure 
+          label="Detail Pengiriman" 
+          active={activeSection.shipping} 
+          onClick={() => toggleSection('shipping')} 
+        />
+        { activeSection.shipping && (
+          <CustomerSection address={transaction?.address?.shipping} />
+        ) }
+
+        <LineDivider />
+
+        <Disclosure 
+          label="Detail Penagihan" 
+          active={activeSection.invoice} 
+          onClick={() => toggleSection('invoice')} 
+        />
+        { activeSection.invoice && (
+          <CustomerSection address={transaction?.address?.invoice} />
+        ) }
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file
-- 
cgit v1.2.3